<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>麦知网</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
    <link rel="stylesheet" href="../css/market.css">
    <link href="../ico/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/add.js"></script>
    <style>
        .splash-subhead a:link,.splash-subhead a:visited{
            color: white;
            text-decoration: none;
        }
        .button-small button-secondary,
        .button-error,
        .button-warning,
        .button-small button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-small button-secondary {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-small button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }
        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }
        .post-avatar {
            border-radius: 50px;
            float: right;
            margin-left: 1em;
        }
        .pure-g{
            margin: 15px 0 15px 0;
        }
    </style>
  </head>

  <body>
    <div class="header">
        <div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
            
                <a href="javascript:void(0)">您好{{name|capfirst}}！欢迎来到麦知！请关注您喜欢的用户.</a>
            
        </div>
    </div>

    <div class="splash-container">
        关注您喜欢的主题吧
    <div class="nextsplash">
        <div>
            <div class="nextsplash-head">
                <div class="pure-g">
                    {% for i in user1 %}
                    <div class="pure-u-1-5"> <img src="{{i.domain}}/{{i.img}}" style="float:left" height="48" width="48" /> <div style="float:left;"><div style="margin-left:15px;">{{i.user_name}}</div><div style="margin-left:15px;margin-top:15px;"><button id="add{{i.user_id}}" type="button" onclick="add({{i.user_id}})" class="button-secondary pure-button button-small"> + | 关注</button><button id="abord{{i.user_id}}" style="display:none" type="button" class="pure-button pure-button-primary button-small"> ✓ | 已关注</button></div></div></div>
                    {% endfor %}
                </div>
                <div class="pure-g">
                    {% for i in user2 %}
                    <div class="pure-u-1-5"> <img src="{{i.domain}}/{{i.img}}" style="float:left" height="48" width="48" /> <div style="float:left;"><div style="margin-left:15px;">{{i.user_name}}</div><div style="margin-left:15px;margin-top:15px;"><button id="add{{i.user_id}}" type="button" onclick="add({{i.user_id}})" class="button-secondary pure-button button-small"> + | 关注</button><button id="abord{{i.user_id}}" style="display:none" type="button" class="pure-button pure-button-primary button-small"> ✓ | 已关注</button></div></div></div>
                    {% endfor %}
                </div>
                <div class="pure-g">
                    {% for i in user3 %}
                    <div class="pure-u-1-5"> <img src="{{i.domain}}/{{i.img}}" style="float:left" height="48" width="48" /> <div style="float:left;"><div style="margin-left:15px;">{{i.user_name}}</div><div style="margin-left:15px;margin-top:15px;"><button id="add{{i.user_id}}" type="button" onclick="add({{i.user_id}})" class="button-secondary pure-button button-small"> + | 关注</button><button id="abord{{i.user_id}}" style="display:none" type="button" class="pure-button pure-button-primary button-small"> ✓ | 已关注</button></div></div></div>
                 {% endfor %}
                </div>
                <div class="pure-g">
                    {% for i in user4 %}
                    <div class="pure-u-1-5"> <img src="{{i.domain}}/{{i.img}}" style="float:left" height="48" width="48" /> <div style="float:left;"><div style="margin-left:15px;">{{i.user_name}}</div><div style="margin-left:15px;margin-top:15px;"><button id="add{{i.user_id}}" type="button" onclick="add({{i.user_id}})" class="button-secondary pure-button button-small"> + | 关注</button><button id="abord{{i.user_id}}" style="display:none" type="button" class="pure-button pure-button-primary button-small"> ✓ | 已关注</button></div></div></div>
                    {% endfor %}
                </div>
            </div>
            <p class="splash-subhead">
                <a href="{% url 'users:index' %}"> 完成，进入我的首页 <i class="fa fa-chevron-circle-right"></i></a>
            </p>
        </div>
    </div>
    </div>
    <div class="content-wrapper">
    <div class="content">
        <h2 class="content-head is-center">为什么一定要选择麦知.</h2>
        <div class="pure-g">
            <div class="l-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">

                <h3 class="content-subhead">
                    <i class="fa fa-bullhorn"></i>
                    一呼百应
                </h3>
                <p>
                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
                <h3 class="content-subhead">
                    <i class="fa fa-cloud"></i>
                    小组云
                </h3>
                <p>
                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
                <h3 class="content-subhead">
                    <i class="fa fa-group"></i>
                    一群相同兴趣的人
                </h3>
                <p>
                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
                </p>
            </div>
            <div class="l-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
                <h3 class="content-subhead">
                    <i class="fa fa-play-circle"></i>
                    短课时学习
                </h3>
                <p>
                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
                </p>
            </div>
        </div>
    </div>
    </div>
  </body>
</html>
